<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>送菜蛙体验</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="./css/reset.css">
	<style>
		body {
			height: 100vh;
			text-align: center;
			margin-top: 60px;
		}
		.contain {
			position: relative;
			display: inline-block;
			padding: 0 1px;
		}
		.pseudo::before,.pseudo::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 45px;
			transform: translate3d(-50%,0,0);
		}
		.pseudo::before {
			top: -45px;
			left: 50%;
			background: url("./images/phone_top.jpg");
	        background-size: 100% 100%;
		}
		.pseudo::after {
			bottom: -35px;
			left: 50%;
			background: url("./images/phone_bottom.jpg");
	        background-size: 100% 100%;
		}
		iframe {
			width: 100%;
			height: 100%;
			box-shadow: 0 0 1px #000;
		}
		.reset-frame {
			width: 400px;
        	height: 700px;
		}
	</style>
</head>
<body>
	<div class="close-btn" onclick="close()"></div>
	<div class="contain pseudo">
		<iframe src="https://scw.new.songcaiwa.cn/public/wScw/#/home" frameborder="0"></iframe>
	</div>
</body>
	<script>
		var body = document.querySelectorAll('body')[0],
			contain = document.querySelectorAll('.contain')[0],
			iframe = document.querySelectorAll('iframe')[0];
		window.onload = function() {
			resetpage();
		}
		/**
		 * [resetpage 判断打开方式（浏览器或手机）]
		 * @return {[type]} [description]
		 */
		function resetpage() {
			if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
				window.location.href = 'https://scw.new.songcaiwa.cn/public/wScw/#/home';
			}else {
				iframe.className = 'reset-frame';
				setTimeout(function() {
					iframe.style.width = 420 + 'px';
					getLocation();
				},6000)
			}
		}
		/**
		 * [getLocation HTML5 定位]
		 */
		function getLocation() {
			var options={
                enableHighAccuracy:true, //boolean 是否要求高精度的地理信息，默认为false
                maximumAge:1000 //应用程序的缓存时间
            }
            if(navigator.geolocation){
            	navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
            }else {
            	alert("当前浏览器不支持定位！")
            }
		}
		/**
		 * [onSuccess 定位成功]
		 * @param  {[object]} position [定位信息，经纬度等]
		 * @return {[locationName]}    [定位详细地址]
		 */
		function onSuccess(position) {
			var longitude =position.coords.longitude,
				latitude = position.coords.latitude;
			console.log(longitude + "," + latitude);
		}
		/**
		 * [onError 定位失败]
		 * @param  {[object]} error [失败参数]
		 */
		function onError(error){
			switch(error.code){
				case error.PERMISSION_DENIED:
					alert("用户拒绝对获取地理位置的请求");
					break;
				case error.POSITION_UNAVAILABLE:
					alert("位置信息是不可用的");
					break;
				case error.TIMEOUT:
					alert("请求用户地理位置超时");
					break;
				case error.UNKNOWN_ERROR:
					alert("未知错误");
					break;
				}
          }
	</script>
</html>